<template>
  <div class="map-content">
    <BaseLeafletMap>
      <GridPointMonitoring
        v-if="moduleVisible.wgModule && componentsVisible.wg"
      ></GridPointMonitoring>
      <DarkPointMonitoring
        v-if="moduleVisible.wgModule && componentsVisible.sbt"
      ></DarkPointMonitoring>
      <LevelGridPointMonitoring
        v-if="componentsVisible.fsgdz"
      ></LevelGridPointMonitoring>
      <NationalStation
        v-if="moduleVisible.zdModule && componentsVisible.gjz"
      ></NationalStation>
      <RegionalStation
        v-if="moduleVisible.zdModule && componentsVisible.qyz"
      ></RegionalStation>
      <CityName v-if="componentsVisible.xm"></CityName>
      <CountyName v-if="baseLeafletMapStore.selectCity"></CountyName>
      <MapLoad v-if="moduleVisible.wgModule"></MapLoad>
    </BaseLeafletMap>
    <StationDialog />
    <StationDialogNew />
  </div>
</template>

<script setup lang="ts">
import { useMonitoringStore } from '@/pages/integrated-monitoring/store/store'
import { useBaseLeafletMapStore } from '@/store/modules/baseLeafletMap'
import CityName from '@/layouts/cityName/index.vue'
import CountyName from '@/layouts/countyName/index.vue'
import GridPointMonitoring from '@/pages/integrated-monitoring/components/map-components/gridPointMonitoring/index.vue'
import LevelGridPointMonitoring from '@/pages/integrated-monitoring/components/map-components/levelGridPointMonitoring/index.vue'
import DarkPointMonitoring from '@/pages/integrated-monitoring/components/map-components/darkPointMonitoring/index.vue'
import NationalStation from '@/pages/integrated-monitoring/components/map-components/nationalStation/index.vue'
import RegionalStation from '@/pages/integrated-monitoring/components/map-components/regionalStation/index.vue'
import StationDialog from '@/pages/integrated-monitoring/components/station-dialog.vue'
import StationDialogNew from '@/pages/integrated-monitoring/components/station-dialog-new.vue'
import MapLoad from './map-load.vue'

const monitoringStore = useMonitoringStore()
const baseLeafletMapStore = useBaseLeafletMapStore()
const componentsVisible = computed(() => monitoringStore.componentsVisible)
const moduleVisible = computed(() => monitoringStore.moduleVisible)
//网格预报点击地图经纬度
let clickLatlng = ref({ lat: '', lng: '' })
provide('clickLatlng', clickLatlng)
onMounted(() => {
  monitoringStore.handleGetStationInfo()
  monitoringStore.handleGetGridPointMonitoringLegendData()
  monitoringStore.gdskjcCurrentSelect = 'none'
  componentsVisible.gjz = true
})

onUnmounted(() => {})
</script>

<style scoped lang="scss">
.map-content {
  width: 100%;
  height: 100%;
}
</style>
